<template>
  <div class="login-container">
    <div class="login-content">
      <!-- 左侧品牌区域 - 深色主题区分 -->
      <div class="brand-section super-admin-theme">
        <div class="brand-header">
          <img src="@/assets/images/美团图标.png" class="brand-logo" />
          <span class="brand-name">智融财务</span>
        </div>
        <div class="brand-slogan">
          <h1>系统超级管理员<br>控制台</h1>
          <p>全平台资源调度、租户管理与系统监控中心。<br>仅限授权的系统运维人员访问。</p>
        </div>
        <div class="brand-features">
          <div class="feature-item">
            <i class="el-icon-office-building"></i>
            <span>多租户管理</span>
          </div>
          <div class="feature-item">
            <i class="el-icon-monitor"></i>
            <span>系统监控</span>
          </div>
          <div class="feature-item">
            <i class="el-icon-setting"></i>
            <span>全局配置</span>
          </div>
        </div>
      </div>

      <!-- 右侧表单区域 -->
      <div class="form-section">
        <div class="form-box">
          <div class="form-header">
            <h2>管理员登录</h2>
            <p>请输入超级管理员账号</p>
          </div>
      
          <!-- 登录表单 -->
          <el-form :model="form" :rules="rules" ref="loginForm" class="login-form">
            <el-form-item prop="username">
              <el-input 
                v-model="form.username" 
                placeholder="管理员账号"
                prefix-icon="el-icon-user-solid">
              </el-input>
            </el-form-item>
            
            <el-form-item prop="password">
              <el-input 
                type="password" 
                v-model="form.password" 
                placeholder="密码"
                prefix-icon="el-icon-lock"
                show-password
                @keyup.enter.native="handleLogin">
              </el-input>
            </el-form-item>
            
            <el-form-item>
              <el-button type="primary" class="submit-btn super-admin-btn" :loading="loading" @click="handleLogin">
                <i class="el-icon-s-check"></i> 安全登录
              </el-button>
            </el-form-item>
            
            <div class="form-footer">
              <a @click="goToUserLogin"><i class="el-icon-back"></i> 返回企业用户登录</a>
            </div>
          </el-form>
        </div>
      </div>
    </div>
    
    <div class="login-bg-shape super-admin-shape"></div>
  </div>
</template>

<script>
import http from '@/api/http'

export default {
  name: 'SuperAdminLogin',
  data() {
    return {
      form: {
        username: '',
        password: ''
      },
      rules: {
        username: [
          { required: true, message: '请输入管理员账号', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 5, message: '密码长度不能少于5位', trigger: 'blur' }
        ]
      },
      loading: false
    }
  },
  methods: {
    async handleLogin() {
      try {
        const valid = await this.$refs.loginForm.validate()
        if (!valid) return

        this.loading = true
        const { data } = await http.post('/super-admin/login', this.form)

        if (data.code === 0) {
          localStorage.setItem('superAdminToken', data.data.token)
          localStorage.setItem('isSuperAdmin', 'true')
          localStorage.setItem('superAdmin', JSON.stringify(data.data.superAdmin))

          this.$message.success('登录成功')
          this.$router.push('/super-admin/dashboard')
        } else {
          this.$message.error(data.message || '登录失败')
        }
      } catch (error) {
        console.error('Login error:', error)
        this.$message.error(error.response?.data?.message || '登录失败')
      } finally {
        this.loading = false
      }
    },
    goToUserLogin() {
      this.$router.push('/login')
    }
  }
}
</script>

<style scoped>
.login-container {
  min-height: 100vh;
  background: #f0f2f5;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.login-bg-shape {
  position: absolute;
  top: -30%;
  right: -10%;
  width: 70%;
  height: 150%;
  border-radius: 0 0 0 100%;
  opacity: 0.1;
  z-index: 0;
  pointer-events: none;
}

.super-admin-shape {
  background: linear-gradient(135deg, #2c3e50 0%, #4ca1af 100%);
}

.login-content {
  width: 1000px;
  height: 600px;
  background: white;
  border-radius: 24px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.1);
  display: flex;
  z-index: 1;
  overflow: hidden;
}

.brand-section {
  flex: 1;
  padding: 60px;
  display: flex;
  flex-direction: column;
  color: white;
  position: relative;
}

.super-admin-theme {
  background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
}

.brand-section::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('https://img.meituan.net/bs/file/?f=meis-image:logo_w.png') no-repeat center;
  opacity: 0.05;
  background-size: cover;
}

.brand-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 60px;
}

.brand-logo {
  height: 40px;
  filter: brightness(0) invert(1); /* 白色Logo */
}

.brand-name {
  font-size: 24px;
  font-weight: 800;
  color: white;
}

.brand-slogan h1 {
  font-size: 40px;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 20px;
  color: white;
}

.brand-slogan p {
  font-size: 16px;
  line-height: 1.6;
  opacity: 0.8;
  margin-bottom: 60px;
}

.brand-features {
  display: grid;
  gap: 20px;
}

.feature-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 600;
}

.feature-item i {
  width: 32px;
  height: 32px;
  background: rgba(255,255,255,0.2);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.form-section {
  flex: 1;
  padding: 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.form-box {
  max-width: 360px;
  margin: 0 auto;
  width: 100%;
}

.form-header {
  margin-bottom: 40px;
  text-align: center;
}

.form-header h2 {
  font-size: 28px;
  font-weight: 700;
  color: #2c3e50;
  margin-bottom: 8px;
}

.form-header p {
  color: #7f8c8d;
}

.submit-btn {
  width: 100%;
  height: 44px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 8px;
  margin-top: 10px;
}

.super-admin-btn {
  background: #2c3e50;
  border-color: #2c3e50;
}

.super-admin-btn:hover {
  background: #34495e;
  border-color: #34495e;
}

.form-footer {
  text-align: center;
  margin-top: 24px;
  font-size: 14px;
  color: #7f8c8d;
}

.form-footer a {
  color: #2c3e50;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: all 0.3s;
}

.form-footer a:hover {
  color: #34495e;
  transform: translateX(-2px);
}

:deep(.el-input__inner) {
  height: 44px;
  border-radius: 8px;
  background: #f7f8fa;
  border: 1px solid transparent;
}

:deep(.el-input__inner:focus) {
  background: white;
  border-color: #2c3e50;
  box-shadow: 0 0 0 2px rgba(44, 62, 80, 0.2);
}

/* Responsive */
@media (max-width: 768px) {
  .login-content {
    flex-direction: column;
    width: 90%;
    height: auto;
  }
  .brand-section {
    padding: 40px;
    min-height: 200px;
  }
  .form-section {
    padding: 40px;
  }
}
</style>
